<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>企业账户注册</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><!-- 导入bootstrap -->
<script src="https://code.jquery.com/jquery.js"></script><!-- 导入JQuery方便使用ajax插件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><!-- 导入bootstrap核心js文件 -->
</head>
<body>
<% 
	int sid=(int)request.getAttribute("sid");
	int gid=(int)request.getAttribute("gid");
	String user_name=(String)request.getAttribute("user_name");
	int uid=(int)request.getAttribute("uid");
%>
 <!-- 评论面板 -->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">发表评论</h3>
        </div>
        <form class="panel-body" id="formAddCmt">
            <div>评论人：</div>
            <!-- 添加form-control更好看-->
            <input type="text" class="form-control" value="${user_name}"  name="username" autocomplete="off" />
            <div>评论内容：</div>
            <textarea class="form-control" id="cont" name="content"></textarea>
            <button style="margin-top: 5px" type="submit" class="btn btn-primary">发表评论</button>
        </form>
    </div>
        <!-- 评论列表 -->
    
    <ul class="list-group" id="cmt-list">
        <li class="list-group-item">
            <!--badge自带右浮动，因此需要互换姓名和时间的顺序 -->
            <span class="badge" style="background-color: #F0AD4E;">评论时间：</span>
            <span class="badge" style="background-color: #5BC0DE;">评论人：</span> Item 1
        </li>
    </ul>
<script type="text/javascript">
	var sid="<%=sid%>";
	var gid="<%=gid%>";
	var uname="<%=user_name%>";
	var uid="<%=uid%>"
    function getCommentList() {
  $.ajax({
    method: 'GET',
    url: '/ProfessionalDesign/getComment', <!-- 添加controller返回json格式 -->
  	data: "s_id=" + sid + "&g_id=" + gid,
    success: function (res) { 
      var rows = []
      $.each(res, function (i, item) {
    	  var str = '<li class="list-group-item"><span class="badge" style="background-color: #F0AD4E;">评论时间：' + item.date + '</span><span class="badge" style="background-color: #5BC0DE;">评论人：' + item.user_name +'</span><button type="button" class="btn btn-default btn-sm badge">\n' +
          '  <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>'+item.likes +
          '</button></span>'+ item.content + '</li>'
        rows.push(str)
      })
      $('#cmt-list').empty().append(rows.join(''))
    }
  })
}

getCommentList();
$(function () {
	  $('#formAddCmt').submit(function (e) {
	    e.preventDefault()
	    var date = new Date()<!--获得日期数据-->
	    var textchat=$("#cont").val();
	    console.log(textchat);
	    var comment ={
        			c_id:1,
        			user_id:uid,
        			user_name:uname,
        			shop_id:sid,
        			good_id:gid,
        			content:textchat,
        			likes:1,
        			date:date
                }
	    $.ajax({
            type: "POST",
            url:"/ProfessionalDesign/sendComment",
            data: JSON.stringify(comment),
            contentType:"application/json",
            success: function (res) {
            	getCommentList();
            	$('#formAddCmt')[0].reset();
      	      //$('#formAddCmt')[0].reset();
            }
	  })
	})
})
</script>
</body>
</html>